// TODO: cleanup the other places
// this copies a lot of global styles defined in _kobo.bem.ui.scss
// we copy it because we want to use this component outside of .form-modal__item
// plus we fight the specificity battle because of too general styles of Form Builder

label.text-box {
  &.text-box--error {
    color: $cool-red;

    input.text-box__input {
      border-bottom-color: $cool-red;
    }
  }

  &.text-box--on-white input.text-box__input {
    border-top-color: rgba($divider-color, 0.5);
    border-left-color: rgba($divider-color, 0.5);
    border-right-color: rgba($divider-color, 0.5);

    &:focus {
      border-color: $cool-blue;
    }
  }

  &.text-box--on-white.text-box--error input.text-box__input {
    border-color: $cool-red;
  }

  .text-box__label .text-box__label-link {
    display: inline-block;
    vertical-align: bottom;

    .k-icon {
      font-size: 24px;
      display: block;
      margin: -2px;
    }
  }

  input.text-box__input {
    width: 100%;
    padding: 4px 10px;
    font-size: 15px;
    border: 1px solid transparent;
    border-bottom-color: $divider-color;
    transition: border-color 0.3s;

    &:focus {
      transition: border-color 0.3s;
      border-bottom-color: $cool-blue;
    }
  }
}
